<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>直播房间</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
		rel="stylesheet" />
	<script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
	<style>
		#Left {
			width: 245px;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			background: #fff;
			border-right: 1px solid #ccc;
			box-shadow: #ccc 0 2px 4px;
			overflow: auto;
		}

		#MainRight {
			margin-left: 245px;
			overflow: hidden;
			background: #fff;
			border-right: 1px solid #ccc;
			box-shadow: #ccc 0 2px 4px;
		}

		.nodeover .layui-tree-iconClick,
		.nodeover .layui-tree-txt {
			color: #009688;
			font-weight: bold;
		}

		.layui-tree li ul {
			margin-left: 20px;
		}

		/* .layui-card-header .layui-icon {
			position: inherit !important;
		} */

		layui-tree li .layui-tree-spread,
		.layui-tree li a {
			display: inline !important;
			height: 26px;
			display: inline;
			zoom: 1;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div id="Left">
	</div>
	<div id="MainRight">
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-form layui-card-header layuiadmin-card-header-auto">
					<div class="layui-input-inline">
						<label class="layui-form-label">直播名称：</label>
						<div class="layui-input-inline">
							<input type="text" name="Name" id="Name" placeholder="请输入名称查询" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<!-- <div class="layui-input-inline">
						<label class="layui-form-label">直播模板：</label>
						<div class="layui-input-inline">
							<select name="Template" id="Template" lay-filter="Template">
								<option value="-1" selected="selected">全部</option>
								<option value="0">纯视频</option>
								<option value="1">视频+文档</option>
							</select>
						</div>
					</div> -->
					<!-- <div class="layui-input-inline">
						<label class="layui-form-label">直播状态：</label>
						<div class="layui-input-inline">
							<select name="Status" id="Status" lay-filter="Status">
								<option value="-1" selected="selected">全部</option>
								<option value="0">未开始</option>
								<option value="1">等待中</option>
								<option value="2">直播中</option>
								<option value="3">已结束</option>
								<option value="4">回放中</option>
							</select>
						</div>
					</div> -->
					<div class="layui-input-inline">
						<button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-app-front-search"
							id="btnSearch">
							<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
						</button>
					</div>
				</div>

				<div class="layui-card-body">
					<!-- <script id="toolbar" type="text/html">
							<div class="layui-btn-group">
								<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
							</div>
						</script> -->
					<table id="dataTable" lay-filter="dataTable"></table>
				</div>
			</div>
		</div>
	</div>


	<script type="text/html" id="flagTpl">
		    {{#  if(d.DelFlag == '1'){ }}
		    <span style="color:red;">停用</span>
		    {{#  } else { }}
		    启用
		    {{#  } }}
		</script>

	<script type="text/html" id="option">

		<a class="layui-btn layui-btn-xs" lay-event="livedetail">直播详情</a>
		    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		    {{#  if(d.DelFlag == '0'){ }}
		    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-extend-stop"></i>停用</a>
		    {{#  } else { }}
		    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>
		    {{#  } }}
	</script>
</body>

</html>

<script>
	layui.config({
		base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	});

	layui.define(['index', 'layer', 'form', 'element', 'table','tree'], function () {
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var table = layui.table;
		var $ = layui.$;
		var admin = layui.admin;
		var setter = layui.setter;
		var tree = layui.tree;


		var controller = {
			data: {
				datatable: null,
				layerindex: 0,
				model: {},
				cid:-1,
			},
			//初始化页面
			initpage: function () {
				var self = this
				this.initevent(function () {

					self.datatableLoad();
				});

			},
			getbaseurl: function (fun) {
				var url = "/lowcode/APP20210908194005415/live/?view=layui&fun=" + fun;
				return url;
			},
			//打开弹层
			openlayer: function (title, elem, successfunction, yesfunction, width, height) {
				var self = this;
				layer.open({
					type: 2
					, title: title
					, content: elem
					, maxmin: true
					, area: [width, height]  //宽，高
					, btn: ['保存', '取消']
					, success: function (layero, index) {
						if (successfunction) {
							successfunction();
						}
					}
					, btn2: function (index, layero) {
						$("#LAY-app-form-reset").trigger('click');
					}
					, cancel: function () {
						$("#LAY-app-form-reset").trigger('click');
					}
					, yes: function (index, layero) {
						self.data.layerindex = index;
						var field = getResult()
						console.log(field)
						if (field != null) {
							layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
							if (yesfunction) {
								yesfunction(field);
							}
						}
					}
				});
			},
			//关闭弹层
			closelayer: function () {
				layer.close(this.data.layerindex);
			},
			//获取树结构
			treeLoad: function () {
				var self = this;
				admin.req({
					type: "get",
					url: self.data.baseinfo.apiGateway+"/live/v1/Live/InitLoadTree",
					done: function (res) {
						var treelist = res.data.treedata;
						self.viewToTree(treelist);
					}
				});
			},
			//树显示
			viewToTree: function (treelist) {
				var self = this;
				tree.render({
					elem: '#Left',
					isJump: true,
					onlyIconControl: true,
					autoRefresh: true,
					customOperate: true,
					data: treelist,
					click: function (obj) {						
						console.log(obj);
						var data = obj.data;
						self.data.checkinfo = data;
						$("#Left .nodeover").removeClass("nodeover");
						$(obj.elem).find(".layui-tree-main").eq(0).addClass("nodeover");
						self.data.cid = data.id;
						self.data.level = data.level;
						self.datatableLoad();

					}
				});
			},
			//初始化事件
			initevent: function (func) {
				var self = this;
				var url = this.getbaseurl("LiveCourse.getbaseinfo");
				admin.req({
					url: url,  //控制器名称，方法名称
					data: {},
					done: function (res) {
						self.data.baseinfo = res.data;
						self.treeLoad();
						if (func) {
							func();
						}
					}
				});
				//查找reload,通过条件，查询网格的table重载数据显示到界面
				form.on("submit(LAY-app-front-search)", function (data) {
					self.datatableLoad()
				});

				//监听行工具事件
				table.on('tool(dataTable)', function (obj) {  //tool是工具条事件名，table原始容器的属性
					var data = obj.data;//当前行数据
					var layEvent = obj.event;//获得lay-event的值
					if (obj.event === "edit") {
						self.editlivecourse(data);
					}
					if (obj.event === "livedetail") {
						self.livedetail(data)
					}
					// 启用停用机构
					if (obj.event === "disable" || obj.event === "enable") {

						var confirm_msg = "";
						var status = 0;
						if (data.DelFlag == 0) {
							confirm_msg = "确认停用么?";
							status = 1;
						}
						else {
							confirm_msg = "确认启用么?";
							status = 0;
						}

						layer.confirm(confirm_msg, { icon: 3, title: "提示" },
							function (index) {
								self.data.layerindex = index;
								self.deleteroom(data, status);
							});
					}
				});

			},
			//直播详情/直播场次
			livedetail:function(data){
				window.currData = data;
                var self = this;
                var title=data.Name;
                layer.open({
                    type: 2
                    , title: title
                    // ,closeBtn:1
                    // , btn: [ '关闭']
                    , content: 'liveDetail.html'
                    , area: ['100%', '100%']  //宽，高
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                })
			},
			datatableLoad: function () {
				var self = this;
				var Name = $("#Name").val();
				var Template = -1;//$("#Template").val();
				var Status = -1;//$("#Status").val();
				self.data.dataTable = table.render({
					elem: "#dataTable",
					where: {
						// workId: self.data.baseinfo.WorkId,
						Name: Name,
						Template: Template,
						Status: Status,
						CategoryId:self.data.cid,
						Level:self.data.level
					},
					toolbar: '',
					url: self.getbaseurl("LiveCourse.getliveroom"),
					height: "full-130",
					size: '10',
					page: true, //开启分页 
					loading: true,
					cols: [
						[
							// { field: 'RoomId', title: '房间号', width: '8%' },
							{ field: 'Type', title: '直播间类型', width: '20%',templet:function(d){
								if (d.Type == 0) {
										return '个人直播间'
									} else {
										return '课程直播间'
									}
							} },
							{ field: 'Name', title: '直播间名称', width: '30%' },
							// {
							// 	field: 'Template', title: '直播模板', width: '12%', templet: function (d) {
							// 		if (d.Template == 0) {
							// 			return '纯文本'
							// 		} else {
							// 			return '视频+文档'
							// 		}
							// 	}
							// },
							{
								field: 'CoverImage', title: '直播封面', width: '15%', templet: function (d) {
									if (d.CoverImage) {
										return '<img src="' + d.CoverImage + ' " style="width: 40px; height: 40px;" />';
									} else {
										return ""
									}
								}
							},
							{ field: 'AnchorName', title: '直播主持人', width: '15%' },
							// {
							// 	field: 'DocLevel', title: '直播状态', width: '12%', templet: function (d) {
							// 		if (d.DelFlag == 1) {
							// 			return '<span style="color:red;">已停用</span>'
							// 		} else {
							// 			if (d.Status == 0) {
							// 				return "未开始"
							// 			} else if (d.Status == 1) {
							// 				return "等待中"
							// 			} else if (d.Status == 2) {
							// 				return "直播中"
							// 			} else if (d.Status == 3) {
							// 				return "已结束"
							// 			} else {
							// 				return "回放中"
							// 			}
							// 		}
							// 	}
							// },
							// { field: 'EndTime', title: '最后一次直播', width: '12%' },
							{ field: 'operation', title: '操作', toolbar: '#option', width: '20%', fixed: 'right' }
						]
					],
					done: function (res) {
						console.log(res)
						self.data.tabledata = res.data
					}
				});
			},
			
			//编辑
			editlivecourse: function (row) {
				var self = this;
				window.modelData = row;
				self.openlayer("编辑直播间", 'liveroomedit.html', null, function (field) {
					self.saveliveroom(field);
				}, '800px', '600px');
			},
			//保存课程
			saveliveroom: function (field) {
				var self = this;
				var url = self.getbaseurl("LiveCourse.saveliveroom");
				admin.req({
					type: 'post',
					url: url,
					data: field,
					done: function (obj) {
						layer.msg("保存成功");

						self.datatableLoad();
						self.closelayer(); //关闭弹层
					}
				});
			},
			//删除课程
			deleteroom: function (data, status) {
				var self = this;
				var url = self.getbaseurl("LiveCourse.deleteroom");
				admin.req({
					type: "post",
					url: url,
					data: {
						model: JSON.stringify(data),
						Status: status
					},
					done: function (res) {
						self.datatableLoad();
						self.closelayer(); //关闭弹层
					}
				});
			}

		}

		/*
		* 入口
		*/
		controller.initpage();
	});

</script>